<template>
  <div class="swiper-box">
    <div class="swiper-image swiper-container recommend-lunbo">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
          slider1
        </div>
        <div class="swiper-slide">
          slider2
        </div>
        <div class="swiper-slide">
          slider3
        </div> -->
        <div class="swiper-slide" v-for="(item, index) in recommends" :key="index">
          <img class="swiper-images" :src="item.imageUrl">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// 获取轮播数据
import { getBanner } from '@/api/recomment'
// 200验证
import { ERR_OK } from '@/common/js/common'

export default {
  data () {
    return {
      // 轮播歌数据
      recommends: []
    }
  },
  methods: {
    _getBanner () {
      getBanner().then((res) => {
        if (res.status === ERR_OK) {
          this.recommends = res.data.banners
          // console.log(this.recommends)
          // this.$nextTick(() => {
          //   this.initSwiper()
          //   console.log(99)
          // })
        }
      })
    }
    // initSwiper () {
    //   console.log(this.mySwiper)
    //   var mySwiper = new Swiper('.swiper-image', {
    //     loop: true,
    //     // nested: true,
    //     // resistanceRatio: 0,
    //     slidesPerView: 'auto',
    //     loopedSlides: 8
    //   })
    //   console.log(mySwiper)
    // }
  },
  mounted () {
    console.log(this.recommends)
    var mySwiper = new Swiper('.swiper-image', {
      // 自动播放时间
      autoplay: 3000,
      // 用户操作swiper之后，是否禁止autoplay。默认为true
      autoplayDisableOnInteraction: false,
      // 循环播放
      loop: true,
      nested: true,
      // resistanceRatio: 0,
      loopedSlides: 8,
      // slidesPerView: 'auto',
      // 启动动态检查器默认为false
      observer: true,
      // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
      observerParents: true,
      // 每组显示个数
      // slidesPerView: 3,
      // 分页器也就是小圆点
      pagination: '.swiper-pagination'
    })
    console.log(mySwiper)
  },
  created () {
    this._getBanner()
  }
}
</script>

<style scoped lang="less">
.recommend-lunbo {
  /*padding-top: 88px;*/
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 38.25%;
}
.swiper-image {
  border-radius: 6px;
}
.swiper-images {
  width: 100%;
}
</style>
